<template>
  <el-dialog
    :visible="visible"
    width="450px"
    custom-class="pintuan-wrapper"
    :before-close="handleClose"
  >
    <div slot="title" class="pintuan-header">正在拼团</div>
    <div class="pintuan-body">
      <el-scrollbar class="scroll">
        <div class="item" v-for="item in pintuanList" :key="item.id">
          <el-avatar :size="50" :src="item.current_user_avatar_url"></el-avatar>
          <div>
            <div class="scope">还差{{ item.total_num - item.join_num }}人</div>
            <div class="time">
              剩余
              <CountDown :timestamp="item.expiry_countdown"></CountDown>
            </div>
          </div>
          <div class="btn" @click="handleJoinPintuan(item.id)">
            去拼团
          </div>
        </div>
        <EduNoData v-if="$util.isEmpty(pintuanList)"></EduNoData>
      </el-scrollbar>
    </div>
    <div slot="footer" class="pintuan-footer">
      <div class="btn" @click="handleCreatePintuan">发起拼团</div>
    </div>
  </el-dialog>
</template>

<script>
import EduNoData from '@/components/EduNoData'
import CountDown from './countdown'
import { mapState } from 'vuex'
export default {
  components: {
    EduNoData,
    CountDown
  },
  props: {
    promotion: Object
  },
  computed: {
    ...mapState({
      visible: state => state.promotion.promotionPintuanVisible,
      pintuanList: state => state.promotion.promotionPintuanList,
      shareCode: state => state.projectSetting.globShareCode
    })
  },
  methods: {
    // 关闭
    handleClose() {
      this.$store.commit('promotion/SET_PROMOTION_PINTUAN_VISIBLE', false)
    },
    // 发起拼团
    handleCreatePintuan() {
      let _this = this
      let query = {
        cid: _this.$route.params.id,
        pid: _this.promotion.id
      }
      // 如果code添加code
      if (!_this.$util.isEmpty(_this.shareCode)) {
        query = {
          ...query,
          share_code: _this.shareCode
        }
      }

      // 返回地址
      query = {
        ...query,
        redirect: _this.$route.path
      }

      _this.$api.postPromotionPintuanCreate(
        {
          promotion_id: _this.promotion.id
        },
        () => {
          _this.handleClose()
          _this.$router.push({
            path: '/buy/course',
            query: query
          })
        },
        error => {
          _this.$message.error(error.msg)
        }
      )
    },
    // 加入拼团
    handleJoinPintuan(id) {
      let _this = this
      let query = {
        cid: _this.$route.params.id,
        pid: _this.promotion.id
      }
      // 如果code添加code
      if (!_this.$util.isEmpty(_this.shareCode)) {
        query = {
          ...query,
          share_code: _this.shareCode
        }
      }

      // 返回地址
      query = {
        ...query,
        redirect: _this.$route.path
      }

      _this.$api.postPromotionPintuanJoin(
        {
          tuan_id: id
        },
        () => {
          _this.handleClose()
          _this.$router.push({
            path: '/buy/course',
            query: query
          })
        },
        error => {
          _this.$message.error(error.msg)
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .pintuan-wrapper .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
}
::v-deep .pintuan-wrapper .el-dialog__footer {
  border-top: 1px solid #ebeef5;
}
.pintuan-wrapper {
  .el-dialog__header {
    border-bottom: 1px solid #ebeef5;
  }
  .pintuan-header {
    font-size: 15px;
    font-weight: 400;
    color: $text-color-import;
  }
  .pintuan-body {
    .scroll {
      width: 100%;
      height: 264px;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .item {
      padding: 8px 0;
      display: flex;
      align-items: center;
      .el-avatar {
        margin-right: 12px;
      }
      .scope {
        font-size: 14px;
        font-weight: 400;
        color: $text-color-import;
      }
      .time {
        margin-top: 5px;
        font-size: 12px;
        font-weight: 400;
        color: $text-color-auxiliary;
        display: flex;
        align-items: center;
      }
      .btn {
        margin-left: auto;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        background: #ff8a52;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
  .pintuan-footer {
    display: flex;
    justify-content: center;
    .btn {
      padding: 7px 19px;
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      background: #ff8a52;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
</style>
